import React, { Component } from 'react';
import style from './index.module.scss';
import { NavLink } from 'react-router-dom'
import Footer from './../../components/footer'

class Com extends Component {
  state = {
    num: 1
  }
  tabto(num) {
    this.setState({
      num: num
    })
  }
  render() {
    return (
      <div className='box'>
        <div className="content">
          <div className={style.header}>
              {/* 返回按钮 */}
              <div className={style.heboxto} onClick={()=> {console.log(this.props.history.go(-1))}}>
                  <span>&lt;</span>
                  <span>返回</span>
                </div>
            
                {/* 搜索框 */}
                <NavLink to="/search">
                  <input type="text" className={style.sou} placeholder="搜索目的地" disabled/>
                </NavLink>

                {/* 文案 */}
                <div className={style.wenan}>欣赏生活自来美</div>

                {/* 标签 */}
                <div className={style.biaoqian}>
                  <span>伴侣</span>
                  <span>朋友</span>
                  <span>珍惜的人</span>
                </div>

                {/* 创造 */}
                <div className={style.chuang}>创造一段有TA的旅程!</div>
            </div>
            {/* 图片 */}
            {/* <div className={style.tu}> */}
              <NavLink to="/destination/goodidea" className={style.tu}>
                <img src="/images/chuxing/banner-wenda@2x.png" alt=""/>
              </NavLink>
            {/* </div> */}
            {/* 分类 */}
            <div className={style.fenlei}>
              <div onClick={() => this.tabto(1)}>
                <img src="/images/chuxing/独来独往@2x.png" alt=""/>
                <span className={this.state.num === 1 ? style.you : ''}>独来独往</span>
              </div>
              <div onClick={() => this.tabto(2)}>
                <img src="/images/chuxing/情侣蜜月@2x.png" alt=""/>
                <span className={this.state.num === 2 ? style.you : ''}>情侣蜜月</span>
              </div>
              <div onClick={() => this.tabto(3)}>
                <img src="/images/chuxing/朋友小聚@2x.png" alt=""/>
                <span className={this.state.num === 3 ? style.you : ''}>朋友小聚</span>
              </div>
              <div onClick={() => this.tabto(4)}>
                <img src="/images/chuxing/家庭温情@2x.png" alt=""/>
                <span className={this.state.num === 4 ? style.you : ''}>家庭温情</span>
              </div>
              <div onClick={() => this.tabto(5)}>
                <img src="/images/chuxing/公司团建@2x.png" alt=""/>
                <span className={this.state.num === 5 ? style.you : ''}>公司团建</span>
              </div>
            </div>

            {/* 列表 */}
            <ul className={style.lie}>
              <li>
                <div className={style.jingtu}>
                    <img src="/images/chuxing/banner@2x.png" alt=""/>
                    <div className={style.imgzi}>世界自然遗产</div>
                </div>
                <div className={style.jingjie}>
                  <div className={style.title}><span>[九寨沟]</span> 天神在这打翻了调色盘，造就了绚丽的童话世界</div>
                  <div className={style.address}>地点：四川省</div>
                  <div className={style.timer}>
                    <span>最佳游玩时间：深秋</span>
                    <div className={style.box}>
                      <span>
                        <img src="/images/chuxing/dianzang-no click@2x.png" alt=""/>
                      </span>
                      <span>3456人</span>
                      <span>
                        <img src="/images/chuxing/shoucang-no click@2x.png" alt=""/>
                      </span>
                      <span>1234人</span>
                    </div>
                  </div>
                </div>
                
              </li>
            </ul>
        </div>
        <Footer></Footer>
      </div>
    );
  }
}

export default Com
